<template>
  <div class="all">
    <div class="title" >其他工具</div>
    <div class="image-box" :class="className">
      <div v-if="navigation && navigation.length >= 1 && data.tabType == 1" >
        <!-- <div class="image-list">
          <div v-for="(item, index) in data.data" :key="index" class="image-item">
            <img :src="item.url">
            <div class="image-name">{{ item.name }}</div>
          </div>
        </div> -->
        <div class="carbox">
          <el-carousel :interval="5000" arrow="never" indicator-position="none" :style="{ height: Altitude }">
            <el-carousel-item v-for="i in numArray" :key="i" :style="{ height: Altitude }">
              <div class="image-list" :style="{ height: Altitude }">
                <div v-for="(item, index) in navigation[i - 1]" :key="index + '_list'" class="image-item"
                  :style="{ width: 'calc(100% / 4 - 20px)' }">
                  <img :src="item.url">
                  <div class="image-name">{{ item.name }}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>
    </div>
    <div v-if="navigation && navigation.length >= 1 && data.tabType == 2">
        <div v-for="i in numArray" :key="i">
          <div class="item"  v-for="(item, index) in navigation[i - 1]" :key="index + '_list'">
              <div class="items">
                  <img :src="item.url">
                  <div>{{ item.name }}</div>
              </div>
              <div style="color:#999999">></div>
          </div>
        </div>
      </div>
     <div v-if="navigation.length <= 0">
        <div class="image-null"><span class="el-icon-menu"></span></div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Images',
  props: ['data', 'className'],
  data() {
    return {
      navigation: [],
      num: '',
      numArray: [],
    }
  },
  computed: {
    Altitude() {
      if (this.navigation[0].length > 4) {
          return '170px'
        } else {
          return '100px'
        }
      // if (this.data.tabType == 1) {
      //   if (this.navigation[0].length > 3) {
      //     return '170px'
      //   } else {
      //     return '100px'
      //   }
      // } else if (this.data.tabType == 2) {
      //   if (this.navigation[0].length > 4) {
      //     return '170px'
      //   } else {
      //     return '100px'
      //   }
      // } else if (this.data.tabType == 3) {
      //   if (this.navigation[0].length > 5) {
      //     return '170px'
      //   } else {
      //     return '100px'
      //   }
      // }

    }
  },
  watch: {
    'data.data': function (newVal, oldVal) {
      // 在这里处理 data 数据变化的逻辑
      this.getData()
    },
    'data.tabType': function (newVal, oldVal) {
      // 在这里处理 tabType 数据变化的逻辑
      this.getData()
    },
    data: {
      handler(newData, oldData) {
        // 检查 tabType 是否发生了变化  
        console.log('Prop Value changed from1', newData,);
        this.getData()
      },
      
      // 开启深度监听  
      deep: true
    },
  },
  mounted() {
    this.getData()//对数据进行修改
  },
  methods: {
    getData() {
      let num = this.data.tabType == 1 ? 6 : this.data.tabType == 2 ? 8 : 10
      let newA = []
      newA = this.data.data.filter((item,index)=>{
        return item.isShow == true
      })
      this.navigation = this.chunkArray(newA, num)
      this.num = this.navigation.length;
      this.numArray = this.createArr(this.num)
      console.log(this.numArray,'1')
      console.log(this.navigation,'2')
    },
    //将数组结构
    chunkArray(array, size) {
      const result = [];
      for (let i = 0; i < array.length; i += size) {
        result.push(array.slice(i, i + size));
      }
      return result;
    },
    createArr(num) {
      let arr = [];
      for (let i = 1; i <= num; i++) {
        arr.push(i);
      }
      return arr;
    }

  }
}
</script>

<style scoped lang="scss">
.item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  width: 90%;
  margin: 0 auto;
  .items{
     display: flex;
    align-items: center;
    img{
    width: 22px;
    height: 22px;
    margin-right: 14px;
  }
  }
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #333333;
  border-bottom: 1px solid #f5f5f5;
}
.all{
  background-color: #ffffff;
  width: 378px;
  margin: 10px auto;
  border-radius: 9px;
  .title{
    padding: 14px;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
  }
}
.title{
  width: 100%;
  height: 30rpx;
}
.btn {
  height: 40px;
  width: 80px;
}

.image-box {
  font-size: 0;
  padding: 5px 10px;


  .image-null {
    background: #ffffff;
    height: 200px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
    width: 100%;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    border-radius: 8px;
  }

  .image-item {
    width: calc(100% / 4 - 20px);
    text-align: center;
    margin: 10px;

    img {
      width: 30px;
      height: 30px;
      max-width: 30px;
    }

    .image-name {
      font-weight: 500;
      font-size: 13px;
      color: #333333;
      height: 20px;
      margin-top: 5px;
      text-align: center;
    }
  }

  &.two {}

  &.three {}


}



.carbox {
  background-color: #ffffff;
  max-height: 200px !important;

  ::v-deep.el-carousel__container {
    height: auto;
  }

  // ::v-deep .el-carousel {
  //   .el-carousel__container {
  //     max-height: 200px !important;
  //     min-height: 80px !important;
  //     height: auto !important;

  //   }
  // }


  .image-list {
    display: flex;
    flex-wrap: wrap;

    border-radius: 8px;
  }

  .image-item {
    width: calc(100% / 4 - 20px);
    text-align: center;
    margin: 10px;
    text-align: center;
    img {
      width: 30px;
      height: 30px;
      max-width: 30px;
    }

    .image-name {
      font-weight: 500;
      font-size: 13px;
      color: #333333;
      height: 20px;
      margin-top: 5px;
      text-align: center;
    }
  }
}
</style>